<template>
	<div class="login-container flex">
		<div class="login-right flex">
			<div class="login-right-warp flex-margin">
				<span :class="state.login_one"></span>
				<span :class="state.login_two"></span>
				<div class="login-right-warp-mian">
					<!-- <el-upload
										class="upload-demo"
										ref="uploadFileRef"
										:limit="1"
										accept=".xlsx, .xls"
										:action="state.server_url"
										:before-upload="uploadFormat"
										:on-progress="handleFileUploadProgress"
										:on-success="handleFileSuccess"
										:auto-upload="false"
										:data="state.uploadAudio"
										:on-exceed="onexceed"
										:on-change="handleChange"
										drag>
										<el-icon class="el-icon--upload"><upload-filled /></el-icon>
										<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
										<template #tip>
											<div class="el-upload__tip text-center">
												<span>仅允许导入xls、xlsx格式文件。</span>
												<el-link type="primary" :underline="false" style="font-size: 12px;" @click="importTemplate">下载模板</el-link>
											</div>
										</template>
							</el-upload> -->
					<div class="login-right-warp-main-title">聊天机器人</div>
					<div class="login-right-warp-main-form" style="min-height: 70%;overflow-y: scroll; padding-bottom: 100px; ">
						<div  v-for="(item, index) in state.listContent" :class="item.direction">
							<el-row v-if="item.direction=='chat_left'">
								<el-col :span="2">
									<div class="demo-basic--circle">
										<div class="block"><el-avatar shape="square" :size="50" :src="loginBg"></el-avatar></div>
									</div>
								</el-col>  
								<el-col :span="22">
									<div class="grid-content bg-purple chat_left_p">
										{{item.content}}
									</div>
								</el-col>  
							</el-row>
							<el-row v-if="item.direction=='chat_right'">
								<el-col :span="22">
									<div class="grid-content bg-purple chat_right_p">
										{{item.content}}
									</div>
								</el-col>  
								<el-col :span="2">
									<div class="demo-basic--circle">
										<div class="block"><el-avatar shape="square" :size="50" :src="loginBg1"></el-avatar></div>
									</div>
								</el-col>  
							</el-row>
						</div>
					</div>
					<div style="margin: auto;">		
						<el-row style="padding: 0px">
							<el-col :span="9">
								<div class="grid-content bg-purple">
									<el-form-item label="选择模型：">
										<el-select v-model="state.form.model" placeholder="请选择活动区域" style="width: 300px;">
										<el-option label="8k" value="moonshot-v1-8k"></el-option>
										<el-option label="32k" value="moonshot-v1-32k"></el-option>
										<el-option label="128k" value="moonshot-v1-128k"></el-option>
										</el-select>
									</el-form-item>
								</div>
							</el-col>
							<el-col :span="11" style="margin-left:10px ;">
								<div class="grid-content bg-purple-light">
									<el-form-item label="内容：">
										<el-input type="textarea" v-model="state.form.content"></el-input>
									</el-form-item>
								</div>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="24">
								<div class="grid-content bg-purple-light" style="margin-left:10px;">
									<el-form-item>
										<el-upload
											ref="uploadFileRef"
											class="upload-demo"
											:headers="state.headers"
											:limit="1"
											accept=".doc, .docx,.pdf"
											:action="state.server_url"
											:before-upload="uploadFormat"
											:on-progress="handleFileUploadProgress"
											:on-success="handleFileSuccess"
											:auto-upload="false"
											:data="state.form"
											:on-exceed="onexceed"
											:on-change="handleChange">
											<el-button size="small" type="primary">点击上传</el-button>
											<div style="margin-left:10px ;" slot="tip" class="el-upload__tip">只能上传pdf, doc 以及图片等格式</div>
										</el-upload>	
										<el-button style="margin-left:20px ;" type="primary" @click="onSubmit" :disabled="state.status">发送</el-button>
									</el-form-item>
								</div>
							</el-col>
						</el-row>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup name="loginIndex">
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import { NextLoading } from '/@/utils/loading';
import { chatApi } from '/@/api/chat'
import { ElMessage } from 'element-plus';
import loginBg from '/@/assets/3.png'
import loginBg1 from '/@/assets/1.png'
import { getServerUrl,getServerPublic } from "/@/utils/getHost.js";
// import loginMain from '/@/assets/login-main.svg';

// 引入组件
const Account = defineAsyncComponent(() => import('/@/views/login/component/account.vue'));
const uploadFileRef = ref();
// 定义变量内容
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const state = reactive({
	form: {
		  model: 'moonshot-v1-8k',
          content: '',
		  fileId:'',
	},
	server_url:'https://api.moonshot.cn/v1/files',
	login_two:'',
	login_one:'',
	listContent:[
		{
			direction:'chat_left',
			content:"你好!我是北科瑞声产业助手,一个由大模型 AI 提供支持的人工智能助手。我擅长进行产业领域问题解答。如果你有任何疑问或需要帮助，请随时告诉我。",
			
		},
	],
	status:false,
	selectFile:false,
	headers: {
        Authorization: 'sk-RR9fGn86n9sdqMf7dwTB2eseGzsWrs1kKXEajbGWSfxlMQoj'
    },
});
// 获取布局配置信息
const getThemeConfig = computed(() => {
	return themeConfig.value;
});
// 选择文件
const handleChange= (file, fileList) => {
  if (fileList.length < 0) {
    ElMessage.error('未选择文件');
    state.selectFile = false;
    return false;
  }else{
    state.selectFile = true;
  }
}
/** 文件上传成功处理 */
const handleFileSuccess = (response, file, fileList) => {
   		state.fileId = response.id
	    state.form.fileId = response.id
		if(state.form.fileId){
			uploadFileRef.value.clearFiles()
			send();
		}else{
			ElMessage.error('获取不到文件信息!');
			return false;
		}
};

const onSubmit = () => {
	if(state.form.model == ""){
		ElMessage.error('请选择模型!');
		return false;
	}
	if(state.form.content== ""){
		ElMessage.error('请输入内容!');
		return false;
	}
	state.listContent.push({'direction':'chat_right','content':state.form.content});
	state.status = true
	state.login_two='login-right-warp-two';
	state.login_one='login-right-warp-one';
	if(state.selectFile){
		uploadFileRef.value.submit()
	}else{
		send()
	}
}

const send= () => {
		chatApi().chatAdd(state.form).then(res => {
			ElMessage.success('发送成功，请稍等!');
			res.data.choices.forEach(item => {
				if(item.message.content !=""){
					state.listContent.push({'direction':'chat_left','content':item.message.content});
				}
				const box = document.querySelector('.login-right-warp-main-form');
				box.scrollTo(0, box.scrollHeight - box.clientHeight);
				state.status = false
				state.login_two='';
				state.login_one='';
			});
		}).catch(() => {

		})
}
// 页面加载时
onMounted(() => {
	NextLoading.done();
});
</script>

<style scoped lang="scss">
.login-container {
	height: 100%;
	background: var(--el-color-white);
	.login-left {
		flex: 1;
		position: relative;
		background-color: rgba(211, 239, 255, 1);
		margin-right: 100px;
		.login-left-logo {
			display: flex;
			align-items: center;
			position: absolute;
			top: 50px;
			left: 80px;
			z-index: 1;
			animation: logoAnimation 0.3s ease;
			img {
				width: 52px;
				height: 52px;
			}
			.login-left-logo-text {
				display: flex;
				flex-direction: column;
				span {
					margin-left: 10px;
					font-size: 22px;
					color: #26a59a;
				}
				.login-left-logo-text-msg {
					font-size: 12px;
					color: #32a99e;
				}
			}
		}
		.login-left-img {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 100%;
			height: 52%;
			img {
				width: 100%;
				height: 100%;
				animation: error-num 0.6s ease;
			}
		}
		.login-left-waves {
			position: absolute;
			top: 0;
			right: -100px;
		}
	}
	.login-right {
		width: 100%;
		.login-right-warp {
			border: 1px solid var(--el-color-primary-light-3);
			border-radius: 3px;
			width: 80%;
			height: 80%;
			position: relative;
			overflow: hidden;
			background-color: var(--el-color-white);
			.login-right-warp-one,
			.login-right-warp-two {
				position: absolute;
				display: block;
				width: 100%;
				height: 100%;
				&::before,
				&::after {
					content: '';
					position: absolute;
					z-index: 1;
				}
			}
			.login-right-warp-one {
				&::before {
					filter: hue-rotate(0deg);
					top: 0px;
					left: 0;
					width: 100%;
					height: 3px;
					background: linear-gradient(90deg, transparent, var(--el-color-primary));
					animation: loginLeft 3s linear infinite;
				}
				&::after {
					filter: hue-rotate(60deg);
					top: -100%;
					right: 2px;
					width: 3px;
					height: 100%;
					background: linear-gradient(180deg, transparent, var(--el-color-primary));
					animation: loginTop 3s linear infinite;
					animation-delay: 0.7s;
				}
			}
			.login-right-warp-two {
				&::before {
					filter: hue-rotate(120deg);
					bottom: 2px;
					right: -100%;
					width: 100%;
					height: 3px;
					background: linear-gradient(270deg, transparent, var(--el-color-primary));
					animation: loginRight 3s linear infinite;
					animation-delay: 1.4s;
				}
				&::after {
					filter: hue-rotate(300deg);
					bottom: -100%;
					left: 0px;
					width: 3px;
					height: 100%;
					background: linear-gradient(360deg, transparent, var(--el-color-primary));
					animation: loginBottom 3s linear infinite;
					animation-delay: 2.1s;
				}
			}
			.login-right-warp-mian {
				display: flex;
				flex-direction: column;
				height: 100%;
				.login-right-warp-main-title {
					height:100px;
					line-height: 50px;
					font-size: 20px;
					font-weight: bold;
					text-align: center;
					letter-spacing: 3px;
					animation: logoAnimation 0.3s ease;
					animation-delay: 0.3s;
					color: var(--el-text-color-primary);
				}

			}
		}
	}
}
.chat_left{	
	padding-left: 20px;
	width: 60%;		
	float: left;
}
.chat_left_p{
	text-align: left;
	text-indent: 2em;	
	// line-height: 50px;
}
.chat_right{	
	padding-left: 20px;
	width: 60%;	
	float: right;
}
.chat_right_p{
	text-align: right;
	text-indent: 2em;	
	padding-right: 25px;
}


.container::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.container::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom right, #4d7fff 0%, #1a56ff 100%);
  border-radius: 5px;
}

.container::-webkit-scrollbar-track {
  background-color: #ddd;
  border: 1px solid #ccc;
}

.container::-webkit-scrollbar-button {
  background-color: #4d7fff;
  border-radius: 5px;
}

.container::-webkit-scrollbar-button:hover {
  background-color: #999999;
}
</style>
